<template>
  <div class="weather-header">
    <nav>
      <a href="/">
        <el-icon><Sunny /></el-icon>
        <p>新中地天气</p>
      </a>
      <div class="items-center">
        <h4 class="text-lg">{{ lives.city }}</h4>
        <span class="text-sm"
          >实时天气：{{ lives.weather }} {{ lives.temperature }}℃</span
        >
        <span class="text-sm"
          >{{ lives.winddirection }}风{{ lives.windpower }}级</span
        >
      </div>
      <div class="btn-center">
        <div @click="isHintForm = true">i</div>
        <div v-if="isShow" @click="addCity">+</div>
      </div>
    </nav>
  </div>
  <HintCard v-if="isHintForm" @close-hint="isHintForm = false" />
</template>
<script setup>
import { Sunny } from '@element-plus/icons-vue';
import { getCityWeather, getCityByIp } from '@/api/index.js';
import { ref, onMounted, watch } from 'vue';
import HintCard from './HintCard.vue';
const lives = ref({
  city: '', //城市
  temperature: '', //温度
  weather: '', //天气
  winddirection: '', //风向
  windpower: '', //风力
});
const cityWeatherList = ref([]);
const isHintForm = ref(false);

const isShow = ref(false);

const emit = defineEmits(['isShow']);

const getList = () => {
  const res = JSON.parse(localStorage.getItem('cityWeatherList') || '[]');
  cityWeatherList.value = res;
};

const porps = defineProps({
  addcity: {
    type: Object,
    required: true,
    default: () => {},
  },
});

const addCity = () => {
  isShow.value = false;
  cityWeatherList.value.push(porps.addcity);
  localStorage.setItem(
    'cityWeatherList',
    JSON.stringify(cityWeatherList.value)
  );
};

watch(
  () => porps.addcity,
  () => {
    isShow.value = false;
    if (cityWeatherList.value.length == 0) {
      isShow.value = true;
    } else {
      isShow.value = !cityWeatherList.value.some(
        (item) => item.adcode == porps.addcity.adcode
      );
    }
    emit('isShow', isShow.value);
  },
  {
    teep: true,
  }
);

//本地ip
const ip = '202.103.24.68';

const getWeatherData = () => {
  getCityByIp(ip).then((res) => {
    getCityWeather(res.adcode, 'base').then((weather) => {
      lives.value = weather.lives[0];
    });
  });
};

onMounted(() => {
  getWeatherData();
  getList();
});
</script>

<style lang="scss" scoped>
.weather-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  color: rgb(255 255 255);
  background-color: rgb(0 102 138);
  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  nav {
    display: flex;
    height: 100%;
    margin: 0 80px;
    padding: 0 160px;
    align-items: center;
    gap: 16px;
    a {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 1.5rem;
      line-height: 2rem;
      cursor: pointer;
    }
    .items-center {
      display: flex;
      align-items: center;
      gap: 10px;
      .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
      .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
    .btn-center {
      margin-left: auto;
      display: flex;
      gap: 10px;
      align-items: center;
      div {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
        transition: all 0.5s ease;
        &:nth-child(1) {
          font-size: 12px;
          font-weight: 900;
          font-family: 'Courier New', Courier, monospace;
          background-color: white;
          color: rgb(0 102 138);
        }
        &:nth-child(1):hover {
          background-color: rgb(0 78 113);
          color: white;
        }
        &:nth-child(2) {
          font-size: 20px;
          font-weight: 900;
        }
        &:nth-child(2):hover {
          color: rgb(0 78 113);
        }
      }
    }
  }
}
</style>
